<%--
  Created by IntelliJ IDEA.
  User: 20456
  Date: 2021/11/22
  Time: 10:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<% String contextPath = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>前台界面</title>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/css/navigation.css"/>
    <script src="<%=contextPath%>/js/jquery-3.6.0.min.js"></script>
    <script src="<%=contextPath%>/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div>

    <!-- 水平导航栏的制作 -->
    <div class="ue-bar">
        <div class="ue-bar-wrap">
            <div class="ue-bar-logo" style="width: 150px;">
                <c:if test="${empty username}">
                    <span style="color: white"><a style="color: white" href="<%=contextPath%>/login.jsp">点击登录</a></span>
                </c:if>
                <c:if test="${not empty username}">
                    <span style="color: white;display: inline-block;">${username}</span>
                    <span style="color: white;display: inline-block;">
                        <a style="color: white" href="<%=contextPath%>/user/logout">退出登录</a>
                    </span>
                </c:if>
            </div>
            <div class="ue-bar-nav">
                <ul>
                    <li class="active"><a href="<%=contextPath%>/front/index">
                        <em>首页</em></a></li>
                    <li><a href="<%=contextPath%>/front/querydiningcar" target="_blank">
                        <em>购物车</em></a></li>
                    <li><a href="<%=contextPath%>/front/querymyorder" target="_blank">
                        <em>我的订单</em></a></li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 【自定义 商品 列表】 -->
    <div align="center">
        <p><strong style="padding-right: 1000px">今日推荐</strong></p>
        <hr />
        <!-- 第1行 商品 -->
        <div style="display: table; border-spacing: 30px;">

            <c:forEach items="${todayRecommendFoods}" var="todayfoods">
                <!-- 商品1 -->
                <div class="food"
                        style="width: 200px; height: 300px; background-color: #DCDCDC; display: table-cell;">
                    <input type="hidden" value="${todayfoods.id}">
                    <!-- 图片 -->
                    <img style="width: 200px; height: 200px"
                         src="${todayfoods.picture}">
                    <div
                            style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 菜品名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <label style="font-size: 20px">${todayfoods.foodname}</label>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label style="color: #696969">${todayfoods.price}元</label>
                        </div>

                    </div>
                </div>
            </c:forEach>

        </div>

        <p><strong style="padding-right: 1000px">热门菜品</strong>
            <strong><em><u><a href="<%=contextPath%>/front/complexhots" target="_blank">更多</a></u></em></strong></p>
        <hr />
        <!-- 第2行 商品 -->
        <div style="display: table; border-spacing: 30px;">

            <c:forEach items="${hotsFoods}" var="hotsFoods">
                <!-- 商品1 -->
                <div class="food"
                        style="width: 200px; height: 300px; background-color: #DCDCDC; display: table-cell;">
                    <input type="hidden" value="${hotsFoods.id}">
                    <!-- 图片 -->
                    <img style="width: 200px; height: 200px"
                         src="${hotsFoods.picture}">
                    <div
                            style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 菜品名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <label style="font-size: 20px">${hotsFoods.foodname}</label>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label style="color: #696969">${hotsFoods.price}元</label>
                        </div>

                    </div>
                </div>
            </c:forEach>

        </div>

        <p><strong style="padding-right: 1000px">厨师推荐</strong>
            <strong><em><u><a href="<%=contextPath%>/front/complexcookrecomment" target="_blank">更多</a></u></em></strong></p>
        <hr />

        <!-- 第3行 商品 -->
        <div style="display: table; border-spacing: 30px;">

            <c:forEach items="${cookRecommendFoods}" var="cookFoods">
                <!-- 商品1 -->
                <div class="food"
                        style="width: 200px; height: 300px; background-color: #DCDCDC; display: table-cell;">
                    <input type="hidden" value="${cookFoods.id}">
                    <!-- 图片 -->
                    <img style="width: 200px; height: 200px"
                         src="${cookFoods.picture}">
                    <div
                            style="width: 100%; height: 100px; background-color: #F6F6F6; text-align: center;">
                        <!-- 菜品名称 -->
                        <div style="height: 5px;"></div>
                        <div>
                            <label style="font-size: 20px">${cookFoods.foodname}</label>
                        </div>
                        <!-- 价格 -->
                        <div style="margin-top: 1px">
                            <label style="color: #696969">${cookFoods.price}元</label>
                        </div>

                    </div>
                </div>
            </c:forEach>

        </div>

    </div>



</div>

<script>
    $(function () {
        $(".food").click(function () {
            var id = $($(this).children("input").get(0)).val();
            window.open("http://localhost/front/foodcomplex?id="+id);
        });
    });
</script>

</body>
</html>
